<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webgl绘制点</title>
    <script src="glMatrix-0.9.6.min.js"></script>
    <script>
        /**
         * @variation {string} vertextstring 顶点着色器
         * @variation {string} fragmentstring 片元着色器
         * @variation {string} projMat4 投影矩阵
         * @variation {string} a_position 承接投影坐标点
         * @variation {string} proj 投影坐标系
        */
        let vertexstring = `
        attribute vec4 a_position;
        uniform     mat4    proj;
        void main(void){
            gl_Position =proj *  a_position;
            gl_PointSize=60.0;
        }
        `;
        let fragmentstring = `
        void main(void){
          gl_FragColor = vec4(0,0,1.0,1.0);
        }
        `;
        var projMat4 = mat4.create();
        var webgl;
        function init() {//入口函数
            initWebgl();
            initShader();
            initBuffer();
            draw();
        }

        function initWebgl() {//webgl初始化函数
            let webglDiv = document.getElementById('myCanvas');
            webgl = webglDiv.getContext("webgl");
            webgl.viewport(0, 0, webglDiv.clientWidth, webglDiv.clientHeight);//可视区域
            mat4.ortho(0, webglDiv.clientWidth, webglDiv.clientHeight, 0, -1.0, 1.0, projMat4)//投影
        }

        function initShader() {//shader初始化函数
            let vsshader = webgl.createShader(webgl.VERTEX_SHADER);//顶点shader
            let fsshader = webgl.createShader(webgl.FRAGMENT_SHADER);//片元shader

            webgl.shaderSource(vsshader, vertexstring);
            webgl.shaderSource(fsshader, fragmentstring);//绑定shader容器

            webgl.compileShader(vsshader);
            webgl.compileShader(fsshader);//将容器进行打包编译
            if (!webgl.getShaderParameter(vsshader, webgl.COMPILE_STATUS)) {
                var err = webgl.getShaderInfoLog(vsshader);
                alert(err);
                return;
            }
            if (!webgl.getShaderParameter(fsshader, webgl.COMPILE_STATUS)) {
                var err = webgl.getShaderInfoLog(fsshader);
                alert(err);
                return;
            }
            let program = webgl.createProgram();//创建项目
            webgl.attachShader(program, vsshader);
            webgl.attachShader(program, fsshader)

            webgl.linkProgram(program);//链接
            webgl.useProgram(program);//使用

            webgl.program = program
        }
        
        function initBuffer() {//数据存储的初始化函数
            let pointPosition = new Float32Array([100.0, 100.0, 0.0, 1.0]);//浮点型数组
            let aPsotion = webgl.getAttribLocation(webgl.program, "a_position");//获取shader里面的变量
    
            webgl.vertexAttrib4fv(aPsotion, pointPosition);
            let uniformProj = webgl.getUniformLocation(webgl.program, "proj");//获取投影坐标系
            webgl.uniformMatrix4fv(uniformProj, false, projMat4);
        }

        function draw() {//绘制
            webgl.clearColor(0.0, 0.0, 0.0, 1.0);//设置颜色
            webgl.clear(webgl.COLOR_BUFFER_BIT | webgl.DEPTH_BUFFER_BIT);//颜色检测
            webgl.drawArrays(webgl.POINTS, 0, 1);//绘制点坐标
        }
    </script>
</head>

<body onload="init()">
    <canvas id="myCanvas" width="500" height="500"></canvas>
</body>

</html>